<template>
    <div class="parent">
        <div class="navList">
            <div class="listItem" @click="openList('region')" :class="[this.isActive('region')]">
                <text class="text" :class="[this.textActive('region')]">查找村庄</text>
                <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}"  :class="[this.isOpenKey == 'region'?'open':'']">{{'\ue60b'}}</text>
            </div>
            <div class="listItem" @click="openList('time')" :class="[this.isActive('time')]">
                <text class="text" :class="[this.textActive('time')]">查找设施</text>
                <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}"  :class="[this.isOpen('time')]">{{'\ue60b'}}</text>
            </div>
            <div class="listItem" @click="openList('tabCont')" :class="[this.isActive('tabCont')]">
                <text class="text" :class="[this.textActive('tabCont')]">卫星图</text>
                <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}"  :class="[this.isOpen('tabCont')]">{{'\ue60b'}}</text>
            </div>
        </div>
        <listCont @selectItem="selectItem"></listCont>
        <listCont :is="currentTab" @closeList="closeContent"></listCont>
        <!-- <bmmask class="mask" animation="transition" position="top" :duration="300" ref="bmmask">
            <bmpop class="modal-top">
                <image style="width:550px; height:550px; top:300px; left:100px;" src="bmlocal://assets/demo.jpg"></image>
            </bmpop>
        </bmmask> -->
        <wxc-mask width="550"
                height= '600'
                border-radius="0"
                duration="300"
                mask-bg-color="#FFFFFF"
                :overlay-can-close="false"
                :has-overlay="true"
                :show="show"
                @wxcMaskSetHidden="wxcMaskSetHidden">
            <scroller class="scroller choiceItem">
                <list class="listCont">
                    <cell class="listContItem" @click="toiletEvent('toilet', flag)">
                        <div class="left">
                            <div class="leftPic">
                                <text class="bar-icon toilet" :style="{fontFamily: 'wxcIconFont'}">{{'\ue63b'}}</text>
                            </div>
                            <text class="texts" ref="item" :class="[this.isToilet('toilet')]">公厕</text>
                        </div>
                        <div class="box" :class="[this.isToiletbg('toilet')]"><text class="boxText" :class="[this.isToiletbg('toilet')]">√</text></div>
                    </cell>
                    <cell class="listContItem" @click="solarEvent('solar', solarflag)">
                        <div class="left">
                            <div class="leftPic">
                                <text class="bar-icon solar" :style="{fontFamily: 'wxcIconFont'}">{{'\ue606'}}</text>
                            </div>
                            <text class="texts" ref="item" :class="[this.isSolar('solar')]">太阳能浴室</text>
                        </div>
                        <div class="box" :class="[this.isSolarbg('solar')]"><text class="boxText" :class="[this.isSolarbg('solar')]">√</text></div>
                    </cell>
                    <cell class="listContItem" @click="sewageEvent('sewage', sewageflag)">
                        <div class="left">
                            <div class="leftPic">
                                <text class="bar-icon sewage" :style="{fontFamily: 'wxcIconFont'}">{{'\ue641'}}</text>
                            </div>
                            <text class="texts" ref="item" :class="[this.isSewage('sewage')]">污水处理站</text>
                        </div>
                        <div class="box" :class="[this.isSewagebg('sewage')]"><text class="boxText" :class="[this.isSewagebg('sewage')]">√</text></div>
                    </cell>
                    <cell class="listContItem" @click="waterEvent('water', waterflag)">
                        <div class="left">
                            <div class="leftPic water">
                                <text class="bar-icon water" :style="{fontFamily: 'wxcIconFont'}">{{'\ue60f'}}</text>
                            </div>
                            <text class="texts" ref="item" :class="[this.isWater('water')]">供水站</text>
                        </div>
                        <div class="box" :class="[this.isWaterbg('water')]"><text class="boxText" :class="[this.isWaterbg('water')]">√</text></div>
                    </cell>
                    <cell class="listContItem" @click="publicEvent('public', publicflag)">
                        <div class="left">
                            <div class="leftPic">
                                <text class="bar-icon public" :style="{fontFamily: 'wxcIconFont'}">{{'\ue6b0'}}</text>
                            </div>
                            <text class="texts" ref="item" :class="[this.isPublic('public')]">公益设施</text>
                        </div>
                        <div class="box" :class="[this.isPublicbg('public')]"><text class="boxText" :class="[this.isPublicbg('public')]">√</text></div>
                    </cell>
                    <cell class="listContItem" @click="garbageEvent('garbage', garbageflag)">
                        <div class="left">
                            <div class="garbagePic">
                                <text class="bar-icon garbage" :style="{fontFamily: 'wxcIconFont'}">{{'\ue62b'}}</text>
                            </div>
                            <text class="texts" ref="item" :class="[this.isGarbage('garbage')]">垃圾处理站</text>
                        </div>
                        <div class="box" :class="[this.isGarbagebg('garbage')]"><text class="boxText" :class="[this.isGarbagebg('garbage')]">√</text></div>
                    </cell>
                    <cell class="listContItem" @click="lampEvent('lamp', lampflag)">
                        <div class="left">
                            <div class="leftPic">
                                <text class="bar-icon lamp" :style="{fontFamily: 'wxcIconFont'}">{{'\ue78b'}}</text>
                            </div>
                            <text class="texts" ref="item" :class="[this.isLamp('lamp')]">路灯</text>
                        </div>
                        <div class="box" :class="[this.isLampbg('lamp')]"><text class="boxText" :class="[this.isLampbg('lamp')]">√</text></div>
                    </cell>
                    <cell class="btn">
                        <div class="btnBox" @click="btnBox">
                            <text class="btnText">确定查询</text>
                        </div>
                    </cell>
                </list>
            </scroller>
        </wxc-mask>
    </div>
</template>
<script>
import wxcMask from 'weex-ui/packages/wxc-mask'
import region from '../../components/region'
// import time from './time'
// import tabCont from '../components/tabCont'
import { addIconFontSupport } from '../../config/iconConfig.js'
const dom = weex.requireModule('dom')
const picker = weex.requireModule('picker')
export default {
    name: 'month',
    data () {
        return {
            pIndexKey:'',
            isOpenKey: '',
            textActiveKey: '',
            show: false,
            flag: true,
            solarflag: true,
            sewageflag: true,
            waterflag: true,
            publicflag: true,
            garbageflag: true,
            lampflag: true,
            toiletActive: '',
            activeBg: '',
            solarActive: '',
            solarBg: '',
            sewageActive: '',
            sewageBg: '',
            waterActive: '',
            waterBg: '',
            publicActive: '',
            publicBg: '',
            garbageActive: '',
            garbageBg: '',
            lampActive: '',
            lampBg: ''
        }
    },
    components: {
        region,
        wxcMask
        // time,
        // tabCont
    },
    beforeCreate () {
        addIconFontSupport(dom, "../../")
    },
    methods: {
        isActive (_c) {
            return this.pIndexKey === _c ?'openColor':''
        },
        isOpen (index) {
            return this.isOpenKey === index ?'open':''
        },
        textActive (ind) {
            return this.textActiveKey === ind ? 'textColor' : ''
        },
        openList (_key) {
            if(this.pIndexKey === _key || this.isOpenKey === _key || this.textActiveKey === _key) {
                this.pIndexKey = '';
                this.isOpenKey = '';
                this.textActiveKey = '';
                this.currentTab = '';
            } else {
                this.pIndexKey = _key;
                this.isOpenKey = _key;
                this.textActiveKey = _key;
                this.currentTab = _key;
            }
            if (_key == 'time') {
                this.show = true
                // this.pIndexKey = ''
                // this.isOpenKey = ''
                // this.textActiveKey = ''
            } else {
                this.show = false
                // this.pIndexKey = ''
                // this.isOpenKey = ''
                // this.textActiveKey = ''
            }
        },
        closeContent () {
            this.pIndexKey = ''
            this.isOpenKey = ''
            this.currentTab = ''
            this.textActiveKey = ''
        },
        toiletEvent (key, flag) {
            if (flag) {
                this.toiletActive = key
                this.activeBg = key
                this.flag = false
            } else {
                this.toiletActive = ''
                this.activeBg = ''
                this.flag = true
            }
        },
        isToilet (item) {
            return this.toiletActive === item ? 'active' : ''
        },
        isToiletbg (item) {
            return this.activeBg === item ? 'activebg' : ''
        },
        solarEvent (key, flag) {
            if (flag) {
                this.solarActive = key
                this.solarBg = key
                this.solarflag = false
            } else {
                this.solarActive = ''
                this.solarBg = ''
                this.solarflag = true
            }
        },
        isSolar (item) {
            return this.solarActive === item ? 'active' : ''
        },
        isSolarbg (item) {
            return this.solarBg === item ? 'activebg' : ''
        },
        sewageEvent (key, flag) {
            if (flag) {
                this.sewageActive = key
                this.sewageBg = key
                this.sewageflag = false
            } else {
                this.sewageActive = ''
                this.sewageBg = ''
                this.sewageflag = true
            }
        },
        isSewage (item) {
            return this.sewageActive === item ? 'active' : ''
        },
        isSewagebg (item) {
            return this.sewageBg === item ? 'activebg' : ''
        },
        waterEvent (key, flag) {
            if (flag) {
                this.waterActive = key
                this.waterBg = key
                this.waterflag = false
            } else {
                this.waterActive = ''
                this.waterBg = ''
                this.waterflag = true
            }
        },
        isWater (item) {
            return this.waterActive === item ? 'active' : ''
        },
        isWaterbg (item) {
            return this.waterBg === item ? 'activebg' : ''
        },
        publicEvent (key, flag) {
            if (flag) {
                this.publicActive = key
                this.publicBg = key
                this.publicflag = false
            } else {
                this.publicActive = ''
                this.publicBg = ''
                this.publicflag = true
            }
        },
        isPublic (item) {
            return this.publicActive === item ? 'active' : ''
        },
        isPublicbg (item) {
            return this.publicBg === item ? 'activebg' : ''
        },
        garbageEvent (key, flag) {
            if (flag) {
                this.garbageActive = key
                this.garbageBg = key
                this.garbageflag = false
            } else {
                this.garbageActive = ''
                this.garbageBg = ''
                this.garbageflag = true
            }
        },
        isGarbage (item) {
            return this.garbageActive === item ? 'active' : ''
        },
        isGarbagebg (item) {
            return this.garbageBg === item ? 'activebg' : ''
        },
        lampEvent (key, flag) {
            if (flag) {
                this.lampActive = key
                this.lampBg = key
                this.lampflag = false
            } else {
                this.lampActive = ''
                this.lampBg = ''
                this.lampflag = true
            }
        },
        isLamp (item) {
            return this.lampActive === item ? 'active' : ''
        },
        isLampbg (item) {
            return this.lampBg === item ? 'activebg' : ''
        },
        btnBox () {
            this.show = false
            this.pIndexKey = '';
            this.isOpenKey = '';
            this.textActiveKey = '';
        }
    }
}
</script>
<style scoped>
.parent{
    width: 750px;
    flex: 1;
    background-color: #eee;
}
.navList{
  width: 750px;
  height: 96px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-bottom-color: #eee;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  background-color: white;
}
.listItem{
  width: 250px;
  height: 96px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.special{
  border-right-width: 0;
}
.text{
  font-size:28px;
  font-family:NotoSansHans-Regular;
  color:rgba(151,151,151,1);
}
.bar-ic{
  font-size: 20px;
  color: rgba(151,151,151,1);
  padding-right: 10px;
}
.open{
  transform: rotate(180deg);
  color: rgba(255,255,255,1);
}
.openColor{
  width: 250px;
  height: 60px;
  background-color: rgba(35,196,160,1);
  color: rgba(255,255,255,1);
}
.textColor{
    color: rgba(255, 255, 255, 1);
}



.listContItem{
    width: 550px;
    height: 100px;
    border-bottom-color: #ccc;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding:0 15px;
    background-color: white;
}
.left{
    width: 450px;
    height: 100px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.texts{
    font-size: 28px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
    margin-left: 20px;
}
.choice{
    margin-top: 260px;
    margin-left: 100px;
    width: 550px;
    height: 600px;
    background-color: white;
}
.active{
    /* background-color: rgba(204,204,204,1); */
    /* color: #fff; */
    color: rgba(35,196,160,1);
}
.activebg{
    color: #fff;
    border-color: rgba(35,196,160,1);
    background-color: rgba(35,196,160,1);
}
.garbagePic{
    width: 55px;
    height: 55px;
    justify-content: center;
    align-items: center;
    border-radius: 55%;
}
.leftPic{
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.water{
    color: #fff;
    background-color: rgba(112,144,193,1);
}
.bar-icon{
    font-size: 50px;
}
.toilet{
    color: rgba(80,101,254,1); 
}
.solar{
    color: rgba(87,196,244,1);
}
.sewage{
    color: rgba(153,155,157,1);
}
.public{
    color: rgba(239,146,180,1);
}
.garbage{
    font-size: 57px;
    color: rgba(88,180,128,1);
}
.lamp{
    color: rgba(255,159,72,1);
}
.box{
    width:32px;
    height:32px;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    border-color: rgba(204, 204, 204, 1);
    border-width: 1px;
    border-style: solid;
    background-color:#fff; 
}
.boxText{
    color: #fff;
}
.btn{
    width: 550px;
    height: 150px;
    justify-content: center;
    align-items: center;
}
.btnBox{
    width:200px;
    height:56px;
    background-color:rgba(35,196,160,1);
    border-radius:8px; 
    justify-content: center;
    align-items: center;
}
.btnText{
    font-size:28px;
    font-family:PingFangSC-Regular;
    color:rgba(255,255,255,1);
}
.mask {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, .4);
 }

 .modal-top {
   align-items: flex-start;
   justify-content: flex-start;
 }
</style>
